/**
 * 权限调试组件
 * 用于调试权限系统的状态
 */

import React from 'react';
import { Card, Descriptions, Tag, Button } from 'antd';
import { useAuth } from '../contexts/AuthContext';
import { usePermission } from '../hooks/usePermission';

const AuthDebug: React.FC = () => {
  const auth = useAuth();
  const permission = usePermission();

  const handleTestPermission = () => {
    console.log('🔍 权限系统调试信息:');
    console.log('Auth Context:', auth);
    console.log('Permission Hook:', permission);
    console.log('Auth State:', auth.state);
    console.log('Has datasource.view:', auth.hasPermission('datasource.view'));
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card title="权限系统调试信息" style={{ marginBottom: '16px' }}>
        <Descriptions column={2} bordered>
          <Descriptions.Item label="认证状态">
            <Tag color={auth.state.isAuthenticated ? 'success' : 'error'}>
              {auth.state.isAuthenticated ? '已认证' : '未认证'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="加载状态">
            <Tag color={auth.state.loading ? 'processing' : 'success'}>
              {auth.state.loading ? '加载中' : '已加载'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="用户信息">
            {auth.state.user ? (
              <div>
                <div>用户名: {auth.state.user.username}</div>
                <div>超级用户: {auth.state.user.is_superuser ? '是' : '否'}</div>
              </div>
            ) : (
              <Tag color="default">无用户信息</Tag>
            )}
          </Descriptions.Item>
          
          <Descriptions.Item label="权限列表">
            {auth.state.permissions && auth.state.permissions.length > 0 ? (
              <div>
                {auth.state.permissions.slice(0, 5).map((perm, index) => (
                  <Tag key={index} style={{ marginBottom: '4px' }}>
                    {typeof perm === 'string' ? perm : perm.name}
                  </Tag>
                ))}
                {auth.state.permissions.length > 5 && (
                  <Tag>...等{auth.state.permissions.length}个权限</Tag>
                )}
              </div>
            ) : (
              <Tag color="default">无权限信息</Tag>
            )}
          </Descriptions.Item>
          
          <Descriptions.Item label="数据源查看权限">
            <Tag color={auth.hasPermission('datasource.view') ? 'success' : 'error'}>
              {auth.hasPermission('datasource.view') ? '有权限' : '无权限'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="数据源创建权限">
            <Tag color={auth.hasPermission('datasource.create') ? 'success' : 'error'}>
              {auth.hasPermission('datasource.create') ? '有权限' : '无权限'}
            </Tag>
          </Descriptions.Item>
        </Descriptions>
        
        <div style={{ marginTop: '16px' }}>
          <Button type="primary" onClick={handleTestPermission}>
            在控制台输出详细信息
          </Button>
        </div>
      </Card>
      
      <Card title="Permission Hook 调试信息">
        <Descriptions column={2} bordered>
          <Descriptions.Item label="权限检查器状态">
            <Tag color={permission.isAuthenticated ? 'success' : 'error'}>
              {permission.isAuthenticated ? '已认证' : '未认证'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="超级用户">
            <Tag color={permission.isSuperUser ? 'gold' : 'default'}>
              {permission.isSuperUser ? '是' : '否'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="数据源权限测试">
            <div>
              <Tag color={permission.hasPermission('datasource.view') ? 'success' : 'error'}>
                查看: {permission.hasPermission('datasource.view') ? '✓' : '✗'}
              </Tag>
              <Tag color={permission.hasPermission('datasource.create') ? 'success' : 'error'}>
                创建: {permission.hasPermission('datasource.create') ? '✓' : '✗'}
              </Tag>
              <Tag color={permission.hasPermission('datasource.update') ? 'success' : 'error'}>
                更新: {permission.hasPermission('datasource.update') ? '✓' : '✗'}
              </Tag>
              <Tag color={permission.hasPermission('datasource.delete') ? 'success' : 'error'}>
                删除: {permission.hasPermission('datasource.delete') ? '✓' : '✗'}
              </Tag>
            </div>
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default AuthDebug;
